<template>
  <div>
    <div class="searchbox">
      <div class="inputbox" >
        <input @change="transValue" v-model="value" placeholder="输入项目关键词进行搜索" type="text">
        <div class="shu"></div>
        <div class="searchicon">
          <!-- <el-icon class="u-m-lr-20" color="#fff"><Search /></el-icon> -->
          <img class="u-m-lr-20" src="../../assets/searchimg.png" alt="">
          <span class="pointer" >点击搜索</span>
        </div>
      </div>
    </div>
  </div>
</template> 

<script lang="ts" setup>
import { ref } from 'vue';
const emit = defineEmits(["getValue"])
const value = ref("")
const transValue = () => {
    
  emit("getValue", value.value)
}
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center
}

.searchbox {
  background: url('../../assets/成果/banner.png') no-repeat;
  width: 100%;
  height: 320px;
  background-size: 100% 100%;
  @include flex();
  justify-content: center;

  .inputbox {
    width: 1180px;
    border: 1px solid #fff;
    padding: 10px 20px;
  @include flex();

    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 10px;
    input {
      background-color: rgba(0, 0, 0, 0);
      border: none;
      color: #fff;
      font-size: 20px;
      width: 85%;
    }
    .shu{
      background-color: #fff;
      width: 2px;
      height: 30px
    }
    .searchicon{
      color: #fff;
      @include flex();
      font-size: 16px;
      img{
        width: 25px;
        height: 25px
      }
      span{
        flex-shrink: 0;
      }
    }
    ::-webkit-input-placeholder {
      color: #fff;
      font-size: 16px;
    }

    ::-moz-placeholder {
      color: #fff;
      font-size: 16px;
    }

    :-ms-input-placeholder {
      color: #fff;
      font-size: 16px;
    }

    ::placeholder {
      color: #fff;
      font-size: 16px;
    }
    
  }
}
</style>